<template>
  <el-container>
    <el-header>
      <projectQuery :form="form" @query="getList"></projectQuery>
    </el-header>
    <el-main style="margin-top: 40px;">
      <el-table
        :data="list"
        tooltip-effect="dark"
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="项目名称" prop="name"></el-table-column>
        <el-table-column label="报价" prop="offer"></el-table-column>
        <el-table-column label="总计" prop="total"></el-table-column>
        <el-table-column label="利润金额" prop="profit"></el-table-column>
        <el-table-column label="利润率(%)" prop="percent"></el-table-column>
        <el-table-column label="立项人" prop="username"></el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div v-if="!form.status">
                <el-badge is-dot class="item" >
                  <el-button type="primary" size="mini" @click="editProjectJs(scope.row)">编辑</el-button>
                </el-badge>
              </div>
              <div v-else><el-button type="primary" size="mini" @click="editProjectJs(scope.row)" >编辑</el-button></div>
              <div style="margin-left: 10px;"><el-button type="danger" size="mini" @click="delProjectJs(scope.row)">删除</el-button></div>
            </div>

          </template>
        </el-table-column>

      </el-table>
    </el-main>
    <el-footer style="margin-top: 40px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
    import projectQuery from "./project_query";
    import {mapState, mapActions} from 'vuex'
    import {getProjectYsData,delProject} from '@/apilist/Project'
    export default {
        name: "project_list_js",
        components:{projectQuery},
        data(){
            return {
                form: {
                    name: '',
                    create_user: '',
                    status: 0,
                    date: '',
                    batch_id: '',
                    page: 1,
                    page_size: 10,
                    type: 2,
                },
                list: [],
                total: 0,
            }
        },

        computed:{
            ...mapState('ProjectData',['projectJs']),
        },
        methods:{
            ...mapActions('ProjectData',['getProjectJsActions']),

            getList(form){
                getProjectYsData(form).then(res => {
                    this.list = res.data.data
                    this.total = res.data.total
                    this.$forceUpdate()
                });
            },
            //编辑预算
            editProjectJs(row){
                this.$router.push({
                    path: '/project_js/edit',
                    query:{id: row.id},
                })
            },
            //删除预算
            delProjectJs(row){
                delProject({id: row.id, type: 'js'}).then(res => {
                    if(res.state == 'ok') {
                        this.$message(
                            {type: 'success',
                                message: res.msg,
                                onClose: ()=>{
                                    this.getList(this.form);
                                }
                            }
                        )
                    }
                })
            },
            handleSizeChange(val){
                this.form.page_size = val
                this.getList(this.form)
            },
            handleCurrentChange(val){
                this.form.page= val
                this.getList(this.form)
            }
        },

    }
</script>

<style scoped>
.item{margin-top: 4px;}
</style>
